import React, { Fragment } from 'react'

export default class App extends React.Component {

  constructor(props) {
    super(props) // 必须要有super函数，才可以继承父类里面的属性和方法

    // 要在当前组件内使用的数据，通过state来初始化,组件里面要用的响应式变量，都应该在State里面声明
    this.state = {
      msg: 'Hello React',
      count: 0,
      list: [1, 23, 24],
      userInfo: { id: 1, name: 'wqw' },
      isLogin: true,
    }
  }

  // render()作为渲染函数，是必须的
  // 为什么看见两次render的输出，因为在开发环境时，严格模式下，专门为了检查代码的错误，而做2次 render的执行。
  // 在生产环境里面，只执行一次。
  render() {
    // 使用JSX语法来创建组件的内容
    console.log('render.....');
    // return this.state.msg;
    return (
      // return 里面，必须有一个跟元素，
      // 如果你希望结构里面，不显示这个跟元素，则可以使用<Fragment></Fragment>或者<></>来替代给元素
      // <div class="box">
      //   <div>
      //     {/* 文本插值的语法： {状态名} */}
      //     <h1>{this.state.msg}</h1>
      //   </div>
      //   <div>
      //     {this.state.count}
      //   </div>
      // </div>

      // <Fragment>需要从react模块具名导入到组件， <Fragment>不会渲染为具体的HTML元素的，它只是起到包裹组件内容的作用
      // <Fragment>
      //   <div>
      //     {/* 文本插值的语法： {状态名} */}
      //     <h1>{this.state.msg}</h1>
      //   </div>
      //   <div>
      //     {this.state.count}
      //   </div>
      // </Fragment>

      // <Fragment>的简写：<></>,并且不用导入组件名。
      <>

        <div>
          {/* 文本插值的语法： {状态名} */}
          <h1>{this.state.msg}</h1>
        </div>
        <div>
          {this.state.count}
        </div>
        <div>
          登录状态：{this.state.isLogin ? '欢迎光临' : '来宾你好。'}
        </div>
        <div>
          list: {this.state.list.join("/")}
          {/* 数组会自动展开；  */}
          <br />
          userInfo:{this.state.userInfo.name}
          {/* 对象类型不能作为子元素（not valid as a React child）,
          只能时渲染对象的属性
          */}
        </div>

      </>
    )
  }
}